<template>
  <view class="container">
    <view class="title">AI智控/AI Ctrl</view>
    <view class="subtitle">智能情趣用品小程序或APP操作方法(中文)</view>
    <view class="subtitle english"
      >The instruction of GGL APP for control interestinglove products
      (English)</view
    >

    <view class="section">
      <view class="section-title">最新 APP 下载链接(二维码)</view>
      <view class="update-notice">AI玩法已更新!!!</view>
      <view class="download-link">https://app.dongguan-best.cn/app.html</view>
      <image
        class="qr-code"
        src="../../static/qrcode.png"
        mode="widthFix"
        alt="APP下载二维码"
      ></image>
    </view>

    <view class="section problem-section">
      <view class="section-title">1.问题解决/ Problems & Solution</view>

      <view class="problem-item">
        <view class="problem-title">1.1 搜索不到设备:/No device find out</view>
        <view class="problem-content"
          >检查手机蓝牙和定位功能是否已开启,安卓手机蓝牙连不上,请按以下步骤操作:</view
        >
        <view class="steps">
          <view>1.1.1 打开设置</view>
          <view>1.1.2 找到应用和服务</view>
          <view>1.1.3 打开找到权限管理</view>
          <view>1.1.4 打开应用找到微信</view>
          <view>1.1.5 然后打开里面位置信息和相机麦克风</view>
          <view>媒体和文件都要打开</view>
        </view>
        <view class="english"
          >To check the Bluetooth was turned on by phone.</view
        >
      </view>

      <view class="problem-item">
        <view class="problem-content"
          >-关闭设备电源再重启，打开手机后台管理，清除微信小程序，重新开启微信小程序进行设备搜索及连接。</view
        >
        <view class="english"
          >Turn off the device and restart, open the apps backend management by
          mobile phone to clear the "GGL LOVE' APP and WeChat mini program, open
          the APP or WeChat mini program to search and connect it again.</view
        >
      </view>

      <view class="problem-item">
        <view class="problem-title"
          >1.2 遥控不到设备/No function by mobile phone control</view
        >
        <view class="problem-content"
          >检查产品说明书是否有该项目的操作功能。</view
        >
        <view class="english"
          >To check the item of function is supported by this product.</view
        >
      </view>

      <view class="problem-item">
        <view class="problem-title"
          >1.3 设备不能开机/Device can't be turned on</view
        >
        <view class="problem-content">给设备充电。</view>
        <view class="english">Charging the device.</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
  color: #333;
}

.subtitle {
  font-size: 18px;
  text-align: center;
  margin: 15px 0;
  color: #666;
}

.english {
  color: #888;
  font-size: 14px;
  margin: 5px 0;
}

.section {
  background-color: white;
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.update-notice {
  font-size: 22px;
  font-weight: bold;
  color: #e74c3c;
  text-align: center;
  padding: 15px;
  margin: 15px 0;
  background-color: #fff8e6;
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
}

.download-link {
  color: #3498db;
  text-align: center;
  margin: 10px 0;
  word-break: break-all;
  padding: 10px;
}

.qr-code {
  width: 200px; /* 二维码宽度 */
  height: auto; /* 自动计算高度保持比例 */
  margin: 15px auto; /* 居中显示 */
  display: block; /* 确保margin:auto生效 */
}

.problem-section {
  line-height: 1.6;
}

.problem-item {
  margin-bottom: 20px;
  padding-left: 10px;
}

.problem-title {
  font-weight: bold;
  color: #2c3e50;
  margin: 10px 0;
  font-size: 16px;
}

.problem-content {
  color: #333;
  margin-bottom: 8px;
}

.steps {
  margin: 10px 0 10px 20px;
  color: #555;
}

.steps view {
  margin: 5px 0;
}
</style>
